﻿@model WebApp.Data.tbl_block
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    Edit</h2>
<style type="text/css">
    .main-tb
    {
        width: 100%;
    }
    
    .left-col
    {
        width: 50%;
        padding-left: 25px;
    }
    
    .right-col
    {
        width: 50%;
        vertical-align: top;
        padding: 45px;
    }
    
    .img-warpper
    {
    }
    
    #img-border
    {
        width: 250px;
        height: 250px;
        border: solid 2px #778899;
        margin-bottom: 10px;
    }
</style>
@using (Html.BeginForm("Update", "Block", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <table class="main-tb">
        <tr>
            <td class="left-col">
                <fieldset>
                    <legend>@Model.block_code</legend>
                    @Html.HiddenFor(model => model.block_id)
                    @Html.HiddenFor(model => model.block_code)
                    @Html.HiddenFor(model => model.block_outline_)
                    <div class="editor-label">
                        @Html.LabelFor(model => model.block_code, "รหัสบล๊อค") &nbsp; <b><span id="lbl_code">@Model.block_code</span></b>
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.series_id, "Serie")
                    </div>
                    <div class="editor-field">
                        @Html.DropDownListFor(model => model.series_id, (IEnumerable<SelectListItem>)ViewBag.Series)
                        @Html.ValidationMessageFor(model => model.series_id)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.block_wide, "Block Size (กว้าง x ยาว)") &nbsp; <b><span
                            id="lbl_wide">@Model.block_wide</span></b> x <b><span id="lbl_long">@Model.block_long</span></b>
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.block_height, "ความหนา")
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.block_height)
                        @Html.ValidationMessageFor(model => model.block_height)
                    </div>
                    <div class="editor-label">
                        @Html.LabelFor(model => model.block_weight, "น้ำหนัก")
                    </div>
                    <div class="editor-field">
                        @Html.EditorFor(model => model.block_weight)
                        @Html.ValidationMessageFor(model => model.block_weight)
                    </div>
                    <br />
                    <div>
                        <p>
                            <input type="submit" value="Save" />
                            | @Html.ActionLink("Back to Detail", "Detail", new { id = Model.block_id })
                        </p>
                    </div>
                </fieldset>
            </td>
            <td class="right-col">
                <div class="img-warpper">
                    <div id="img-border">
                    </div>
                    <div class="cmd-warpper">
                        <input type="button" class="btn btn-primary" id="btnEditImg" value="แก้ไข" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
}
<form style="display: none;" action='/Block/Designer' method="post" id="form_alter">
    <input type="hidden" id="form_param1" name="id" value="" />
    <input type="hidden" id="form_param2" name="backurl" value="" />
</form>

<input type="hidden" id="hdOutline" value='@Model.block_outline_' />

<script src="@Url.Content("~/Scripts/tools/js/raphael-min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/tools/blockdisplay.js")" type="text/javascript"></script>
<script type="text/javascript">

    var blockId = "@Model.block_id";

    $(document).ready(function () {

        $("#btnEditImg").click(function () {

            $("#form_param1").attr("value", blockId);
            $("#form_param2").attr("value", "");
            $("#form_alter").submit();

        });

        DisplayBlock($('#img-border')[0], $("#hdOutline").val(), 250, 250);

    });

</script>
